<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html>
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <title>Boo Admin - Boo Table</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="Content/css/bootstrap.css" rel="stylesheet">
    <link href="Content/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="Content/css/extension.css" rel="stylesheet">
    <link href="Content/css/main.css" rel="stylesheet">
    <link href="Content/css/style.css" rel="stylesheet">

    <link href="Content/css/icon-fugue.min.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="Content/libs/selectivizr/selectivizr-1.0.2/js/selectivizr.min.js"></script>
        <script src="Content/libs/pl-visualization/excanvas/js/excanvas.min.js"></script>
    <![endif]-->

    <script src="Content/libs/modernizr/modernizr-2.6.2/js/modernizr-2.6.2.js"></script>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="Content/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://themes.yac.cz/boo2/Content/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://themes.yac.cz/boo2/Content/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://themes.yac.cz/boo2/Content/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="http://themes.yac.cz/boo2/Content/ico/apple-touch-icon-57-precomposed.png">
</head>

<body class="header-sticky sidebar-left ">
    <div class="page-container">
        <div id="header-container">
            <div id="header">
                <div class="navbar navbar-inverse navbar-fixed-top">
                    <div class="navbar-inner">
                        <div class="container-fluid">
                            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                            <a class="brand" href="javascript:void(0);">
                                <img src="Content/img/demo/logo-brand.png"></a>
                            <div class="search-global">
                                <input id="globalSearch" class="search search-query input-medium" type="search">
                                <a class="search-button" href="javascript:void(0);"><i class="fontello-icon-search-5"></i></a>
                            </div>
                            <div class="nav-collapse collapse">
                                <ul class="nav user-menu visible-desktop">
                                    <li><a class="btn-glyph fontello-icon-edit tip-bc" href="javascript:void(0);" title="Messages"><span class="badge badge-important">8</span></a></li>
                                    <li><a class="btn-glyph fontello-icon-mail-1 tip-bc" href="javascript:void(0);" title="Emails"></a></li>
                                    <li><a class="btn-glyph fontello-icon-lifebuoy tip-bc" href="javascript:void(0);" title="Support"><span class="badge badge-important">4</span></a></li>
                                </ul>
                                <ul class="nav">
                                    <li><a href="dashboard-one.html">Dashboard</a> </li>
                                    <li class="active"><a href="javascript:void(0);">Components</a> </li>
                                    <li><a href="fullcalendar-demo.html"><span class="booico-calendar-3"></span> Calendar</a> </li>
                                    <li><a href="contact-manager.html"><span class="booico-user"></span> Contacts</a> </li>
                                    <li class="dropdown"><a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">Customize Page <b class="caret"></b></a>
                                        <ul class="dropdown-menu dropdown-bordered">
                                            <li><a href="form-demo.html">Demo Form</a></li>
                                            <li><a href="widgets-remember.html">Remember</a></li>
                                            <li><a href="widgets-users.html">User List</a></li>
                                            <li class="dropdown-submenu"><a tabindex="-1" href="javascript:void(0);">Login page</a>
                                                <ul class="dropdown-menu">
                                                    <li><a tabindex="-1" href="login-01.html">Type Horizontal</a></li>
                                                    <li><a tabindex="-1" href="login-02.html">Type Vertical</a></li>
                                                </ul>
                                            </li>
                                            <li class="divider"></li>
                                            <li><a href="contact-list.html">Contacts list</a></li>
                                            <li><a href="page-invoice.html">Invoice Management</a></li>
                                            <li><a href="tmp-base-boo-layout.html">Template blank pages</a></li>
                                            <!--<li><a href="page-mailbox.html">Email</a></li>-->
                                            <li class="divider"></li>
                                            <li class="nav-header">Next Update</li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- // navbar -->

                <div class="header-drawer">
                    <div class="mobile-nav text-center visible-phone"><a href="javascript:void(0);" class="mobile-btn" data-toggle="collapse" data-target=".sidebar"><i class="aweso-icon-chevron-down"></i>Components</a> </div>
                    <!-- // Resposive navigation -->
                    <div class="breadcrumbs-nav hidden-phone">
                        <ul id="breadcrumbs" class="breadcrumb">
                            <li><a href="javascript:void(0);"><i class="fontello-icon-home f12"></i>Dashboard</a> <span class="divider">/</span></li>
                            <li class="dropdown"><a href="javascript:void(0);">Table </a><span class="divider">/</span>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:void(0);">Table</a></li>
                                    <li><a href="javascript:void(0);">Elements</a></li>
                                    <li><a href="javascript:void(0);">Elements</a></li>
                                    <li><a href="javascript:void(0);">Elements</a></li>
                                </ul>
                            </li>
                            <li class="active">Boo Admin </li>
                        </ul>
                    </div>
                    <!-- // breadcrumbs -->
                </div>
                <!-- // drawer -->
            </div>
        </div>
        <!-- // header-container -->

        <div id="main-container">
            <div id="main-sidebar" class="sidebar sidebar-inverse">
                <div class="filler"></div>
                <div class="sidebar-item">
                    <div class="media profile">
                        <div class="media-thumb media-left thumb-bordereb"><a class="img-shadow" href="javascript:void(0);">
                            <img class="thumb" src="Content/img/demo/demo-avatar9604.jpg"></a> </div>
                        <div class="media-body">
                            <h5 class="media-heading">Twitter Bootstrap <small>as Administrator</small></h5>
                            <p class="data">Last Access: 16 May 15:30</p>
                        </div>
                    </div>
                </div>
                <!-- // sidebar item - profile -->

                <ul id="mainSideMenu" class="nav nav-list nav-side">
                    <li class="accordion-group">
                        <div class="accordion-heading"><a href="table-boo.html#accDash" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"><span class="item-icon" data-icon="&#xe0bc;" aria-hidden="true"></span><i class="chevron"></i>Dashboards </a></div>
                        <ul class="accordion-content nav nav-list collapse" id="accDash">
                            <li><a href="dashboard-one.html"><span class="hidden-tablet">Dashboard</span> Demo 1 </a></li>
                            <li><a href="dashboard-two.html"><span class="hidden-tablet">Dashboard</span> Demo 2 </a></li>
                        </ul>
                    </li>
                    <!-- // item accordionMenu Dashboard -->
                    <li class="accordion-group">
                        <div class="accordion-heading"><a href="table-boo.html#accForms" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"><span class="item-icon" data-icon="&#xf016;" aria-hidden="true"></span><i class="chevron"></i>Form </a></div>
                        <ul class="accordion-content nav nav-list collapse" id="accForms">
                            <li><a href="form-demo.html">Demo Form </a></li>
                            <li><a href="form-elements.html">Form Element </a></li>
                            <li><a href="form-extension.html">Form Extension</a> </li>
                            <li><a href="form-wizard.html">Form Wizard</a> </li>
                        </ul>
                    </li>
                    <!-- // item accordionMenu Forms -->
                    <li class="accordion-group">
                        <div class="accordion-heading"><a href="table-boo.html#accComponents" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"><span class="item-icon" data-icon="&#xe016;" aria-hidden="true"></span><i class="chevron"></i>Components </a></div>
                        <ul class="accordion-content nav nav-list collapse" id="accComponents">
                            <li><a href="notification.html">Notification </a></li>
                            <li><a href="rangeslider.html">Rangeslider </a></li>
                            <li><a href="file-upload.html">File upload </a></li>
                            <li><a href="gallery.html">Gallery &amp; Image </a></li>
                        </ul>
                    </li>
                    <!-- // item accordionMenu Components -->
                    <li class="accordion-group">
                        <div class="accordion-heading active"><a href="table-boo.html#accTables" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"><span class="item-icon" data-icon="&#xf039;" aria-hidden="true"></span><i class="chevron"></i>Tables </a></div>
                        <ul class="accordion-content nav nav-list collapse in" id="accTables">
                            <li><a href="table.html">Base Table </a></li>
                            <li class="active"><a href="table-boo.html">Boo Table </a></li>
                            <li><a href="table-datatable.html">DataTable </a></li>
                        </ul>
                    </li>
                    <!-- // item accordionMenu Tables -->
                    <li class="accordion-group">
                        <div class="accordion-heading"><a href="table-boo.html#accStatistics" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"><span class="item-icon" data-icon="&#xe0ad;" aria-hidden="true"></span><i class="chevron"></i>Statistics </a></div>
                        <ul class="accordion-content nav nav-list collapse" id="accStatistics">
                            <li><a href="statistic-flot.html">Charts </a></li>
                            <li><a href="statistic-sparkline.html">Sparklines </a></li>
                            <li><a href="statistic-circle.html">Circle </a></li>
                            <li><a href="statistic-custom.html">Other Elements </a></li>
                        </ul>
                    </li>
                    <!-- // item accordionMenu Statistics -->
                    <li class="accordion-group">
                        <div class="accordion-heading"><a href="table-boo.html#accWidgets" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"><span class="item-icon" data-icon="&#xe00e;" aria-hidden="true"></span><i class="chevron"></i>Widgets </a></div>
                        <ul class="accordion-content nav nav-list collapse" id="accWidgets">
                            <li><a href="widget-style.html"><span class="hidden-tablet">Widgets </span>Style </a></li>
                            <li><a href="widget-custom.html"><span class="hidden-tablet">Widgets </span>Custom </a></li>
                        </ul>
                    </li>
                    <!-- // item accordionMenu Widgets -->
                    <li class="accordion-group">
                        <div class="accordion-heading"><a href="table-boo.html#accButtons" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"><span class="item-icon" data-icon="&#xf0a0;" aria-hidden="true"></span><i class="chevron"></i>UI Elements </a></div>
                        <ul class="accordion-content nav nav-list collapse" id="accButtons">
                            <li><a href="button.html">Button </a></li>
                            <li><a href="dropdowns.html">Dropdowns</a></li>
                            <li><a href="http://themes.yac.cz/boo2/icon-font.html">Iconic fonts </a></li>
                            <li><a href="icon-fugue-demo.html">Icon </a></li>
                            <li><a href="wells.html">Wells </a></li>
                            <li><a href="tabs.html">Tabs </a></li>
                            <li><a href="modals.html">Modal </a></li>
                            <li><a href="progressbar.html">Progressbar </a></li>
                        </ul>
                    </li>
                    <!-- // item accordionMenu UI Elements -->
                    <li class="accordion-group">
                        <div class="accordion-heading"><a href="table-boo.html#accCalendar" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"><span class="item-icon" data-icon="&#xe0dd;" aria-hidden="true"></span><i class="chevron"></i>Calendar </a></div>
                        <ul class="accordion-content nav nav-list collapse" id="accCalendar">
                            <li><a href="fullcalendar-demo.html"><span class="hidden-tablet">Calendar </span>Demo </a></li>
                            <li><a href="fullcalendar.html"><span class="hidden-tablet">Calendar </span>Style </a></li>
                        </ul>
                    </li>
                    <!-- // item accordionMenu Calendar -->
                    <li class="accordion-group">
                        <div class="accordion-heading"><a href="table-boo.html#accAppPage" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"><span class="item-icon" data-icon="&#xe0e1;" aria-hidden="true"></span><i class="chevron"></i>Custom Page </a></div>
                        <ul class="accordion-content nav nav-list collapse" id="accAppPage">
                            <li><a href="contact-manager.html">Contact Manager </a></li>
                            <li><a href="page-invoice.html">Invoice Management </a></li>
                        </ul>
                    </li>
                    <!-- // item accordionMenu Custom Page -->
                    <li class="accordion-group">
                        <div class="accordion-heading"><a href="dashboard-one.html" class="accordion-toggle"><span class="item-icon" data-icon="&#xf0c1;" aria-hidden="true"></span><i class="chevron"></i>Only link </a></div>
                    </li>
                    <!-- // item only link -->
                </ul>
                <!-- // sidebar menu -->

                <div class="sidebar-item"></div>
                <!-- // sidebar item -->

            </div>
            <!-- // sidebar -->

            <div id="main-content" class="main-content container-fluid">
                <div class="filler"></div>
                <div class="row-fluid page-head">
                    <h2 class="page-title heading-icon" data-icon="&#xe397;" aria-hidden="true">Boo Tables <small>more style for table </small></h2>
                    <div class="page-bar">
                        <div class="btn-toolbar"></div>
                    </div>
                </div>
                <!-- // page head -->

                <div id="page-content" class="page-content">
                    <section>
                        <div class="page-header">
                           <h3 class="heading-icon" data-icon="&#xe11b;" aria-hidden="true">table <small>.boo-table + bootstrap class</small></h3>
                        </div>
                        <!-- // page-header -->

                        <div class="row-fluid">
                            <div class="span4 grider">
                                <div class="well well-box well-nice">
                                    <div class="navbar">
                                        <div class="navbar-inner no-bg">
                                            <h4 class="title"><i class="booico-browser glyph"></i>Classes for tables <small>default</small></h4>
                                        </div>
                                    </div>
                                    <!-- // navbar -->
                                    <div class="section-content item">
                                        <p>Boo extends display the data in the tables combination of other classes aplikovanch the table element or a wrapper table.</p>
                                    </div>
                                    <!-- // content item -->
                                    <div class="section-content-table">
                                        <table class="table table-striped table-content">
                                            <colgroup>
                                                <col class="col30">
                                                <col class="col70">
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th>class</th>
                                                    <th>description</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><code>.table</code></td>
                                                    <td>default table style</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.boo-table</code></td>
                                                    <td>Styling tables (thead, tfoot, caption, border)</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.table-striped</code></td>
                                                    <td>Adds zebra-striping to any table row within the <code>tbody</code></td>
                                                </tr>
                                                <tr>
                                                    <td><code>.table-bordered</code></td>
                                                    <td>Add borders and rounded corners to the table.</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.table-hover</code></td>
                                                    <td>Enable a hover state on table rows within a <code>tbody</code></td>
                                                </tr>
                                                <tr>
                                                    <td><code>.table-condensed</code></td>
                                                    <td>Makes tables more compact by cutting cell padding in half.</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.table-content</code></td>
                                                    <td>Style for the table located inside of something (well, widget, wrapper)</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.table-light</code></td>
                                                    <td>Table without lines and columns. Removes border</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.filter</code></td>
                                                    <td>Class for column filter to element <code>thead or tfoot</code>. Apli to <code>tr</code></td>
                                                </tr>
                                                <tr>
                                                    <td><code>.column-sorter</code></td>
                                                    <td>Add sortable arrow for table. Apli to <code>span</code> in <code>th</code></td>
                                                </tr>
                                                <tr>
                                                    <td><code>.total</code></td>
                                                    <td>Line for the total in <code>tfoot</code> </td>
                                                </tr>
                                                <tr>
                                                    <td><code>.pagination-btn</code><br>
                                                        <code>.pagination-boo</code></td>
                                                    <td>pagination style as button bootstrap </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- // table-content -->
                                </div>
                                <pre class="prettyprint linenums">
&lt;!-- Boo table --&gt;
&lt;table class="table boo-table"&gt;
    ...
&lt;/table&gt;

&lt;!-- Table combine class --&gt;
&lt;table class="table boo-table table-striped table-bordered ..."&gt;
    ...
&lt;/table&gt;
</pre>
                                <pre class="prettyprint linenums">
&lt;!-- Boo table --&gt;
&lt;table class="table boo-table ..."&gt;
    &lt;caption&gt; ... &lt;/caption&gt;
    &lt;thead&gt; ... &lt;/thead&gt;
    &lt;tfoot&gt; ... &lt;/tfoot&gt;
    &lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;</pre>
                                <pre class="prettyprint linenums">
&lt;table class="table boo-table ..."&gt;
    &lt;thead&gt; 
        &lt;tr&gt;
            &lt;th class="sorting_asc"&gt;ID 
                &lt;span class="column-sorter"&gt;&lt;/span&gt;&lt;/th&gt;
            &lt;th class="sorting"&gt;Name 
                &lt;span class="column-sorter"&gt;&lt;/span&gt;&lt;/th&gt;
            &lt;th class="sorting"&gt;City 
                &lt;span class="column-sorter"&gt;&lt;/span&gt;&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tfoot&gt; 
         &lt;tr class="total ..."&gt; ... &lt;/tr&gt;
    &lt;/tfoot&gt;
    &lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;</pre>
                            </div>
                            <!-- // Column -->

                            <div class="span8 grider">
                                <h3><i class="booico-align-justify opaci35 glyph"></i>boo table <small>all default class</small></h3>
                                <table class="table table-striped table-bordered boo-table">
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td class="hidden-phone">Troy</td>
                                            <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>Marvin Bell</td>
                                            <td class="hidden-phone">Cody</td>
                                            <td class="hidden-tablet hidden-phone">aliquet@Craspellentesque.com</td>
                                            <td>10/17/1979</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // Table Boo -->

                                <hr>
                                <h3><i class="booico-align-justify opaci35 glyph"></i>table <small>.table-content</small></h3>
                                <p><code>table-bordered</code> class can not be combined and <code>table-content</code></p>
                                <table class="table boo-table table-striped table-content">
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td class="hidden-phone">Troy</td>
                                            <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>Marvin Bell</td>
                                            <td class="hidden-phone">Cody</td>
                                            <td class="hidden-tablet hidden-phone">aliquet@Craspellentesque.com</td>
                                            <td>10/17/1979</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // Table Content -->

                                <h3><i class="booico-align-justify opaci35 glyph"></i>table <small>.table-light</small></h3>
                                <p><code>table-light</code></p>
                                <table class="table boo-table table-condensed table-light table-content">
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td class="hidden-phone">Troy</td>
                                            <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>Marvin Bell</td>
                                            <td class="hidden-phone">Cody</td>
                                            <td class="hidden-tablet hidden-phone">aliquet@Craspellentesque.com</td>
                                            <td>10/17/1979</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // Table Content -->

                                <p class="margin-xm"><code>table-light table-striped</code> use backround <code>bg-white</code></p>
                                <table class="table boo-table table-condensed table-striped table-light table-content bg-white">
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td class="hidden-phone">Troy</td>
                                            <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>Marvin Bell</td>
                                            <td class="hidden-phone">Cody</td>
                                            <td class="hidden-tablet hidden-phone">aliquet@Craspellentesque.com</td>
                                            <td>10/17/1979</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // Table Content -->

                                <hr>
                                <h3><i class="booico-align-justify opaci35 glyph"></i>table <small>caption, total</small></h3>
                                <p>This is the caption for <code>.boo-table .table-content</code></p>
                                <table class="table boo-table table-striped table-content table-hover">
                                    <colgroup>
                                        <col class="col20">
                                        <col class="col20">
                                        <col class="col45">
                                        <col class="col15">
                                    </colgroup>
                                    <caption>
                                        Boo Table Caption - Title fot table <span>Here text in span</span>
                                    </caption>
                                    <thead>
                                        <tr id="HeadersRow0">
                                            <th scope="col">Order ID</th>
                                            <th scope="col">Customer ID</th>
                                            <th scope="col">Shipped Date</th>
                                            <th scope="col">Costs</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr class="total" id="HeadersRow0">
                                            <th>Total sum</th>
                                            <th></th>
                                            <th></th>
                                            <th class="text-right">202.46</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr id="DataRow0">
                                            <td class="bold"><a href="table-boo.html#">10248</a></td>
                                            <td>VINET</td>
                                            <td>8/16/2012</td>
                                            <td class="text-right">32.38</td>
                                        </tr>
                                        <tr id="DataRow1">
                                            <td class="bold"><a href="table-boo.html#">10249</a></td>
                                            <td>TOMSP</td>
                                            <td>8/10/2012</td>
                                            <td class="text-right">11.61</td>
                                        </tr>
                                        <tr id="DataRow2">
                                            <td class="bold"><a href="table-boo.html#">10250</a></td>
                                            <td>HANAR</td>
                                            <td>8/12/2012</td>
                                            <td class="text-right">65.83</td>
                                        </tr>
                                        <tr id="DataRow3">
                                            <td class="bold"><a href="table-boo.html#">10251</a></td>
                                            <td>VICTE</td>
                                            <td>8/15/2012</td>
                                            <td class="text-right">41.34</td>
                                        </tr>
                                        <tr id="DataRow4">
                                            <td class="bold"><a href="table-boo.html#">10252</a></td>
                                            <td>SUPRD</td>
                                            <td>8/11/2012</td>
                                            <td class="text-right">51.3</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // Table Boo Caption, total -->

                            </div>
                            <!-- // Column -->

                        </div>
                        <!-- // Example row -->
                    </section>
                    <section>
                        <div class="page-header">
                            <h3 class="heading-icon" data-icon="&#xe397;" aria-hidden="true">table <small>add color and base wrap</small></h3>
                        </div>
                        <!-- // page-header -->
                        <div class="row-fluid">
                            <div class="span6 grider">
                                <div class="table-wrapper">
                                    <table class="table boo-table table-striped table-condensed table-content bg-blue-light">
                                        <colgroup>
                                            <col class="col20">
                                            <col class="col20">
                                            <col class="col45">
                                            <col class="col15">
                                        </colgroup>
                                        <tbody>
                                            <tr id="DataRow0">
                                                <td class="bold"><a href="table-boo.html#">10248</a></td>
                                                <td>VINET</td>
                                                <td>8/16/2012</td>
                                                <td class="text-right">32.38</td>
                                            </tr>
                                            <tr id="DataRow1">
                                                <td class="bold"><a href="table-boo.html#">10249</a></td>
                                                <td>TOMSP</td>
                                                <td>8/10/2012</td>
                                                <td class="text-right">11.61</td>
                                            </tr>
                                            <tr id="DataRow2">
                                                <td class="bold"><a href="table-boo.html#">10250</a></td>
                                                <td>HANAR</td>
                                                <td>8/12/2012</td>
                                                <td class="text-right">65.83</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!-- // Table -->
                                </div>
                                <!-- // Table wrapper -->

                                <div class="table-wrapper">
                                    <table class="table boo-table table-striped table-condensed table-content bg-blue-light">
                                        <colgroup>
                                            <col class="col20">
                                            <col class="col20">
                                            <col class="col45">
                                            <col class="col15">
                                        </colgroup>
                                        <thead>
                                            <tr id="HeadersRow0">
                                                <th scope="col">Order ID</th>
                                                <th scope="col">Customer ID</th>
                                                <th scope="col">Shipped Date</th>
                                                <th scope="col">Costs</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr id="DataRow0">
                                                <td class="bold"><a href="table-boo.html#">10248</a></td>
                                                <td>VINET</td>
                                                <td>8/16/2012</td>
                                                <td class="text-right">32.38</td>
                                            </tr>
                                            <tr id="DataRow1">
                                                <td class="bold"><a href="table-boo.html#">10249</a></td>
                                                <td>TOMSP</td>
                                                <td>8/10/2012</td>
                                                <td class="text-right">11.61</td>
                                            </tr>
                                            <tr id="DataRow2">
                                                <td class="bold"><a href="table-boo.html#">10250</a></td>
                                                <td>HANAR</td>
                                                <td>8/12/2012</td>
                                                <td class="text-right">65.83</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!-- // Table -->
                                </div>
                                <!-- // Table wrapper -->

                                <div class="table-wrapper">
                                    <table class="table boo-table table-striped table-condensed table-content bg-blue-light">
                                        <colgroup>
                                            <col class="col20">
                                            <col class="col20">
                                            <col class="col45">
                                            <col class="col15">
                                        </colgroup>
                                        <caption>
                                            Boo Table Caption - Title fot table <span>Here text in span</span>
                                        </caption>
                                        <tbody>
                                            <tr id="DataRow0">
                                                <td class="bold"><a href="table-boo.html#">10248</a></td>
                                                <td>VINET</td>
                                                <td>8/16/2012</td>
                                                <td class="text-right">32.38</td>
                                            </tr>
                                            <tr id="DataRow1">
                                                <td class="bold"><a href="table-boo.html#">10249</a></td>
                                                <td>TOMSP</td>
                                                <td>8/10/2012</td>
                                                <td class="text-right">11.61</td>
                                            </tr>
                                            <tr id="DataRow2">
                                                <td class="bold"><a href="table-boo.html#">10250</a></td>
                                                <td>HANAR</td>
                                                <td>8/12/2012</td>
                                                <td class="text-right">65.83</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!-- // Table -->
                                </div>
                                <!-- // Table wrapper -->
                            </div>
                            <!-- // Column -->

                            <div class="span6 grider">
                                <div class="table-wrapper">
                                    <table class="table boo-table table-striped table-condensed table-content bg-blue-light">
                                        <colgroup>
                                            <col class="col20">
                                            <col class="col20">
                                            <col class="col45">
                                            <col class="col15">
                                        </colgroup>
                                        <caption>
                                            Boo Table Caption - Title fot table <span>Here text in span</span>
                                        </caption>
                                        <thead>
                                            <tr id="HeadersRow0">
                                                <th scope="col">Order ID</th>
                                                <th scope="col">Customer ID</th>
                                                <th scope="col">Shipped Date</th>
                                                <th scope="col">Costs</th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr id="HeadersRow0" class="total">
                                                <th>Total sum</th>
                                                <th></th>
                                                <th></th>
                                                <th class="text-right">109.82</th>
                                            </tr>
                                        </tfoot>
                                        <tbody>
                                            <tr id="DataRow0">
                                                <td class="bold"><a href="table-boo.html#">10248</a></td>
                                                <td>VINET</td>
                                                <td>8/16/2012</td>
                                                <td class="text-right">32.38</td>
                                            </tr>
                                            <tr id="DataRow1">
                                                <td class="bold"><a href="table-boo.html#">10249</a></td>
                                                <td>TOMSP</td>
                                                <td>8/10/2012</td>
                                                <td class="text-right">11.61</td>
                                            </tr>
                                            <tr id="DataRow2">
                                                <td class="bold"><a href="table-boo.html#">10250</a></td>
                                                <td>HANAR</td>
                                                <td>8/12/2012</td>
                                                <td class="text-right">65.83</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!-- // Table -->
                                </div>
                                <!-- // Table wrapper -->
                                <pre class="prettyprint linenums">
&lt;!-- Table wrapp --&gt;
&lt;div class="table-wrapper"&gt;
    &lt;table class="table boo-table table-content ...."&gt;
        ...
    &lt;/table&gt;
&lt;/div&gt;
</pre>
                            </div>
                            <!-- // Column -->

                        </div>
                        <!-- // Example row -->
                    </section>
                    <section>
                        <div class="page-header">
                            <h3 class="heading-icon" data-icon="&#xe397;" aria-hidden="true">base table <small>in .well-small .well-nice</small></h3>
                        </div>
                        <!-- // page-header -->
                        <div class="row-fluid">
                            <div class="well well-small well-nice">
                                <table class="table table-content table-hover">
                                    <caption>
                                        Default table in well <span>well-small</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td class="hidden-phone">Troy</td>
                                            <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Default table in well -->
                            <div class="clearfix margin-xx">
                                <!-- // only demo separator -->
                            </div>
                            <div class="well well-small well-nice">
                                <table class="table boo-table table-striped table-content table-hover bg-blue-light">
                                    <caption>
                                        Boo table in well <span>well-small and backgroud</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td class="hidden-phone">Troy</td>
                                            <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Boo table in well -->
                            <div class="clearfix margin-xx">
                                <!-- // only demo separator -->
                            </div>
                            <div class="well well-small well-black">
                                <table class="table boo-table table-striped table-condensed table-hover table-content">
                                    <colgroup>
                                        <col class="col20">
                                        <col class="col20">
                                        <col class="col45">
                                        <col class="col15">
                                    </colgroup>
                                    <caption>
                                        Boo table in well-black <span>total</span>
                                    </caption>
                                    <thead>
                                        <tr id="HeadersRow0">
                                            <th scope="col">Order ID</th>
                                            <th scope="col">Customer ID</th>
                                            <th scope="col">Shipped Date</th>
                                            <th scope="col">Costs</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr id="HeadersRow0" class="total">
                                            <th>Total sum</th>
                                            <th></th>
                                            <th></th>
                                            <th class="text-right">109.82</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr id="DataRow0">
                                            <td class="bold"><a href="table-boo.html#">10248</a></td>
                                            <td>VINET</td>
                                            <td>8/16/2012</td>
                                            <td class="text-right">32.38</td>
                                        </tr>
                                        <tr id="DataRow1">
                                            <td class="bold"><a href="table-boo.html#">10249</a></td>
                                            <td>TOMSP</td>
                                            <td>8/10/2012</td>
                                            <td class="text-right">11.61</td>
                                        </tr>
                                        <tr id="DataRow2">
                                            <td class="bold"><a href="table-boo.html#">10250</a></td>
                                            <td>HANAR</td>
                                            <td>8/12/2012</td>
                                            <td class="text-right">65.83</td>
                                        </tr>
                                        <tr id="DataRow0">
                                            <td class="bold"><a href="table-boo.html#">10248</a></td>
                                            <td>VINET</td>
                                            <td>8/16/2012</td>
                                            <td class="text-right">32.38</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- // Boo table in well-black -->
                            <div class="clearfix margin-xx">
                                <!-- // only demo separator -->
                            </div>
                        </div>
                        <!-- // Example row -->

                        <div class="page-header">
                            <h3 class="heading-icon" data-icon="&#xe397;" aria-hidden="true">table in well <small>use navbar</small></h3>
                        </div>
                        <!-- // page-header -->
                        <div class="row-fluid">
                            <div class="well well-small well-nice">
                                <div class="navbar">
                                    <div class="navbar-inner">
                                        <h4 class="title"><i class="fontello-icon-window"></i>Boo table <small>in well-box</small></h4>
                                        <ul class="nav pull-right">
                                            <li><a href="table-boo.html#">Link</a></li>
                                            <li class="divider-vertical"></li>
                                            <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="table-boo.html#">Dropdown <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="table-boo.html#">Action</a></li>
                                                    <li><a href="table-boo.html#">Another action</a></li>
                                                    <li><a href="table-boo.html#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="table-boo.html#">Separated link</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <!-- // nav -->
                                    </div>
                                </div>
                                <!-- // navbar -->
                                <div class="table-wrapper">
                                    <table class="table boo-table table-content table-hover">
                                        <thead>
                                            <tr>
                                                <th scope="col">ID</th>
                                                <th scope="col">Name</th>
                                                <th scope="col" class="hidden-phone">City</th>
                                                <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                                <th scope="col">Date of birth</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Colin Nixon</td>
                                                <td class="hidden-phone">Long Beach</td>
                                                <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                                <td>02/10/1986</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Naida Bennett</td>
                                                <td class="hidden-phone">Lockport</td>
                                                <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                                <td>04/21/1959</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Danielle Myers</td>
                                                <td class="hidden-phone">Bentonville</td>
                                                <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                                <td>12/11/1971</td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>Whitney Jones</td>
                                                <td class="hidden-phone">Troy</td>
                                                <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                                <td>08/09/1976</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // table-wrapper -->

                            </div>
                            <!-- // Boo table in well-nice -->

                        </div>
                        <!-- // Example row -->

                        <div class="page-header">
                            <h3 class="heading-icon" data-icon="&#xe397;" aria-hidden="true">table in well <small>with navbar</small></h3>
                        </div>
                        <!-- // page-header -->
                        <div class="row-fluid">
                            <div class="well well-box well-nice">
                                <div class="navbar">
                                    <div class="navbar-inner">
                                        <h4 class="title"><i class="fontello-icon-window"></i>Boo table <small>in well-box</small></h4>
                                        <ul class="nav pull-right">
                                            <li><a href="table-boo.html#">Link</a></li>
                                            <li class="divider-vertical"></li>
                                            <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="table-boo.html#">Dropdown <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="table-boo.html#">Action</a></li>
                                                    <li><a href="table-boo.html#">Another action</a></li>
                                                    <li><a href="table-boo.html#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="table-boo.html#">Separated link</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <!-- // nav -->
                                    </div>
                                </div>
                                <!-- // navbar -->
                                <table class="table boo-table _table-condensed table-content table-hover">
                                    <!--<caption>
                                        Boo table in well-nice <span>with navbar default</span>
                                        </caption> -->
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td class="hidden-phone">Troy</td>
                                            <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // table -->
                            </div>
                            <!-- // Boo table in well-box -->
                            <div class="clearfix margin-xx">
                                <!-- // only demo separator -->
                            </div>
                            <div class="well well-nice well-box">
                                <div class="navbar">
                                    <div class="navbar-inner">
                                        <h4 class="title"><i class="fontello-icon-palette"></i>Boo color background table</h4>
                                        <ul class="nav nav-pills pull-right">
                                            <li class="active"><a href="table-boo.html#tab1" data-toggle="tab">Blue light</a></li>
                                            <li><a href="table-boo.html#tab2" data-toggle="tab">Green light</a></li>
                                            <li><a href="table-boo.html#tab3" data-toggle="tab">Yellow light</a></li>
                                        </ul>
                                        <!-- // nav -->
                                    </div>
                                </div>
                                <!-- // navbar -->
                                <div class="tab-content no-padding">
                                    <div class="tab-pane active" id="tab1">
                                        <table class="table boo-table table-condensed table-striped table-content table-hover bg-blue-light">
                                            <caption>
                                                Boo color backgroud <span>Blue</span>
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th>Full Name</th>
                                                    <th>Phone</th>
                                                    <th class="action">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jacob Smith</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Isabella Johnson</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Ethan Williams</td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Emma Jones</td>
                                                    <td>emma.jones@example.com</td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- // tab1 -->
                                    <div class="tab-pane" id="tab2">
                                        <table class="table boo-table table-condensed table-striped table-content table-hover bg-green-light">
                                            <caption>
                                                Boo color backgroud <span>Green</span>
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th>Full Name</th>
                                                    <th>Phone</th>
                                                    <th class="action">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jacob Smith</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td class="action"><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Isabella Johnson</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td class="action"><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Ethan Williams</td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td class="action"><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Emma Jones</td>
                                                    <td>emma.jones@example.com</td>
                                                    <td class="action"><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- // tab2 -->
                                    <div class="tab-pane" id="tab3">
                                        <table class="table boo-table table-condensed table-striped table-content table-hover bg-yellow-light">
                                            <caption>
                                                Boo color backgroud <span>Yellow</span>
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th>Full Name</th>
                                                    <th>Phone</th>
                                                    <th class="action">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jacob Smith</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td class="action"><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Isabella Johnson</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td class="action"><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Ethan Williams</td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td class="action"><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Emma Jones</td>
                                                    <td>emma.jones@example.com</td>
                                                    <td class="action"><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- // tab3 -->
                                </div>
                                <!-- // tabs -->
                            </div>
                            <!-- // Boo color table nav-pills -->
                            <div class="clearfix margin-xx">
                                <!-- // only demo separator -->
                            </div>
                            <div class="well well-box well-black">
                                <div class="navbar navbar-inverse">
                                    <div class="navbar-inner">
                                        <h4 class="title"><i class="fontello-icon-window"></i>Boo table <small>in well-box</small></h4>
                                        <ul class="nav pull-right">
                                            <li><a href="table-boo.html#">Link</a></li>
                                            <li class="divider-vertical"></li>
                                            <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="table-boo.html#">Dropdown <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="table-boo.html#">Action</a></li>
                                                    <li><a href="table-boo.html#">Another action</a></li>
                                                    <li><a href="table-boo.html#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="table-boo.html#">Separated link</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <!-- // nav -->
                                    </div>
                                </div>
                                <!-- // navbar -->
                                <table class="table boo-table table-condensed table-content table-hover">
                                    <caption>
                                        Boo table in well-black <span>with navbar inverse</span>
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Name</th>
                                            <th scope="col" class="hidden-phone">City</th>
                                            <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                            <th scope="col">Date of birth</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Colin Nixon</td>
                                            <td class="hidden-phone">Long Beach</td>
                                            <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                            <td>02/10/1986</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Naida Bennett</td>
                                            <td class="hidden-phone">Lockport</td>
                                            <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                            <td>04/21/1959</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Danielle Myers</td>
                                            <td class="hidden-phone">Bentonville</td>
                                            <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                            <td>12/11/1971</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Whitney Jones</td>
                                            <td class="hidden-phone">Troy</td>
                                            <td class="hidden-tablet hidden-phone">Nunc@sedliberoProin.edu</td>
                                            <td>08/09/1976</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- // table -->
                            </div>
                            <!-- // Boo table in well-box well-black -->
                            <div class="clearfix margin-xx">
                                <!-- // only demo separator -->
                            </div>
                            <div class="well well-nice well-box">
                                <div class="navbar">
                                    <div class="navbar-inner">
                                        <h4 class="title"><i class="fontello-icon-palette"></i>More elements for table</h4>
                                        <ul class="btn-toolbar pull-right">
                                            <li class="divider-vertical"></li>
                                            <li><a class="btn" href="javascript:void(0)">button</a></li>
                                            <li><a class="btn btn-green" href="javascript:void(0)">button</a></li>
                                            <li class="divider-vertical"></li>
                                            <li><a class="btn btn-blue" href="javascript:void(0)">button</a></li>
                                            <li class="divider-vertical"></li>
                                            <li><a class="btn btn-glyph" href="javascript:void(0)"><i class="fugue-arrow-circle"></i></a></li>
                                        </ul>
                                        <!-- // btn-toolbar -->
                                        <ul class="nav nav-pills pull-right">
                                            <li class="active"><a href="table-boo.html#tab1A" data-toggle="tab">example 1</a></li>
                                            <li><a href="table-boo.html#tab2A" data-toggle="tab">example 2 (table-light)</a></li>
                                        </ul>
                                        <!-- // nav-pills -->
                                    </div>
                                </div>
                                <!-- // navbar -->
                                <div class="table-tool">
                                    <ul class="btn-toolbar pull-left">
                                        <li><a class="btn btn-small btn-glyph"><i class="fugue-table"></i></a></li>
                                        <li><a class="btn btn-small btn-glyph"><i class="fugue-table-pencil"></i></a></li>
                                        <li><a class="btn btn-small btn-glyph"><i class="fugue-table-plus"></i></a></li>
                                        <li class="divider-vertical small"></li>
                                        <li><a class="btn btn-small btn-glyph"><i class="fugue-table-export"></i></a></li>
                                        <li><a class="btn btn-small btn-glyph"><i class="fugue-table-excel"></i></a></li>
                                        <li class="divider-vertical small"></li>
                                        <li><a class="btn btn-boo btn-small" href="javascript:void(0)">button</a></li>
                                        <li><a class="btn btn-boo btn-small" href="javascript:void(0)">button</a></li>
                                    </ul>
                                    <div class="btn-toolbar pull-right"><a class="btn btn-boo btn-small" href="javascript:void(0)">button</a> <a class="btn btn-small btn-green " href="javascript:void(0)">NEW Contact</a> </div>
                                </div>
                                <div class="tab-content overflow no-padding">
                                    <div class="tab-pane active" id="tab1A">
                                        <table class="table boo-table table-striped table-content table-hover">
                                            <colgroup>
                                                <col>
                                                <col class="col2">
                                                <col>
                                                <col>
                                                <col class="col15">
                                                <col>
                                            </colgroup>
                                            <caption>
                                                More setting for table <span>next elements</span>
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="check-col">
                                                        <input type="checkbox" class="checkbox check-all" name="check-all"></th>
                                                    <th scope="col">ava</th>
                                                    <th scope="col" class="sorting_asc">Full Name <span class="column-sorter"></span></th>
                                                    <th scope="col" class="sorting">Email <span class="column-sorter"></span></th>
                                                    <th scope="col" class="sorting">Status <span class="column-sorter"></span></th>
                                                    <th scope="col" class="sorting">Action <span class="column-sorter"></span></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                    <td class="thumb-mini">
                                                        <div class="media-thumb"><a href="javascript:void(0);" class="img-shadow">
                                                            <img src="Content/img/demo/demo-avatar9603.jpg" class="thumb media-object"></a> </div>
                                                    </td>
                                                    <td><strong><a class="f16" href="table-boo.html">Jacob Smith</a></strong> Curabitur vitae leo justo augue </td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td class="va-middle">
                                                        <div class="progress progress-info progress-small">
                                                            <div style="width: 65%" class="bar"></div>
                                                        </div>
                                                    </td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="table-boo.html">Edit user <i class="fontello-icon-edit"></i></a><a class="btn btn-green btn-glyph btn-mini" href="table-boo.html"><i class="fontello-icon-link-4"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                    <td class="thumb-mini">
                                                        <div class="media-thumb"><a href="javascript:void(0);" class="img-shadow">
                                                            <img src="Content/img/demo/demo-avatar9601.jpg" class="thumb media-object"></a> </div>
                                                    </td>
                                                    <td><strong><a class="f16" href="table-boo.html">Isabella Johnson</a></strong> Curabitur vitae leo justo augue </td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td class="va-middle">
                                                        <div class="progress progress-info progress-mini filled2">
                                                            <div class="filler">
                                                                <div style="width: 65%" class="bar"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="table-boo.html">Edit user <i class="fontello-icon-edit"></i></a><a class="btn btn-green btn-glyph btn-mini" href="table-boo.html"><i class="fontello-icon-link-4"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                    <td class="thumb-mini">
                                                        <div class="media-thumb"><a href="javascript:void(0);" class="img-shadow">
                                                            <img src="Content/img/demo/demo-avatar9602.jpg" class="thumb media-object"></a> </div>
                                                    </td>
                                                    <td><strong><a class="_f16" href="table-boo.html">Ethan Williams</a></strong> Curabitur vitae leo justo augue </td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td class="va-middle">
                                                        <div class="progress progress-success right">
                                                            <div data-amount-total="5000" data-amount-part="3750" class="bar text-filled-5 six-sec-ease-in-out" style="width: 75%;">2500 / 5000</div>
                                                        </div>
                                                    </td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="table-boo.html">Edit user <i class="fontello-icon-edit"></i></a><a class="btn btn-glyph btn-mini" href="table-boo.html"><i class="fontello-icon-link-4"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                    <td class="thumb-mini">
                                                        <div class="media-thumb"><a href="javascript:void(0);" class="img-shadow">
                                                            <img src="Content/img/demo/demo-avatar9605.jpg" class="thumb media-object"></a> </div>
                                                    </td>
                                                    <td><strong><a class="_f16" href="table-boo.html">Emma Jones</a></strong> Curabitur vitae leo justo augue </td>
                                                    <td>emma.jones@example.com</td>
                                                    <td class="va-middle">
                                                        <div class="progress progress-info progress-striped filled3">
                                                            <div class="filler">
                                                                <div style="width: 65%" class="bar"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="table-boo.html">Edit user <i class="fontello-icon-edit"></i></a><a class="btn btn-glyph btn-mini" href="table-boo.html"><i class="fontello-icon-link-4"></i></a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div class="table-message-info">Here info for table</div>
                                        <div class="action-table">
                                            <div class="btn-toolbar pull-left">
                                                <div class="action-select-wraper">
                                                    <span class="arrow-table-action"></span>
                                                    <select class="selectpicker input-medium margin-right5" data-style="btn-boo" id="actionTable" name="actionTable">
                                                        <option value="">Action for selected...</option>
                                                        <option value="validate">Validate</option>
                                                        <option value="delete">Delete</option>
                                                    </select>
                                                    <button class="btn btn-boo" type="submit">Perform the action</button>
                                                </div>
                                            </div>
                                            <ul class="btn-toolbar pull-right">
                                                <li><a class="btn btn-small btn-glyph"><i class="fugue-table"></i></a></li>
                                                <li><a class="btn btn-small btn-glyph"><i class="fugue-table-pencil"></i></a></li>
                                                <li><a class="btn btn-small btn-glyph"><i class="fugue-table-plus"></i></a></li>
                                                <li class="divider-vertical small"></li>
                                                <li><a class="btn btn-small btn-glyph"><i class="fugue-table-export"></i></a></li>
                                                <li><a class="btn btn-small btn-glyph"><i class="fugue-table-excel"></i></a></li>
                                                <li class="divider-vertical small"></li>
                                                <li><a class="btn btn-boo btn-small" href="javascript:void(0)">button</a></li>
                                                <li><a class="btn btn-boo btn-small" href="javascript:void(0)">button</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- // tab1 -->
                                    <div class="tab-pane" id="tab2A">
                                        <table class="table boo-table table-light table-content table-hover">
                                            <colgroup>
                                                <col class="col2">
                                                <col class="col2">
                                                <col>
                                                <col>
                                                <col class="col15">
                                                <col>
                                            </colgroup>
                                            <caption>
                                                Here use table-light <span>next elements</span>
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="check-col">
                                                        <input type="checkbox" class="checkbox check-all" name="check-all"></th>
                                                    <th scope="col">ava</th>
                                                    <th scope="col" class="sorting_asc">Full Name <span class="column-sorter"></span></th>
                                                    <th scope="col" class="sorting">Email <span class="column-sorter"></span></th>
                                                    <th scope="col" class="sorting">Status <span class="column-sorter"></span></th>
                                                    <th scope="col" class="sorting">Action <span class="column-sorter"></span></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                    <td class="thumb-mini">
                                                        <div class="media-thumb"><a href="javascript:void(0);" class="img-shadow">
                                                            <img src="Content/img/demo/demo-avatar9603.jpg" class="thumb media-object"></a> </div>
                                                    </td>
                                                    <td><strong><a class="f16" href="table-boo.html">Jacob Smith</a></strong> Curabitur vitae leo justo augue </td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td class="va-middle">
                                                        <div class="label-field text-right">Completed</div>
                                                        <div class="progress progress-success progress-mini filled2">
                                                            <div class="filler">
                                                                <div style="width: 95%" class="bar"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="table-boo.html">Edit user <i class="fontello-icon-edit"></i></a><a class="btn btn-green btn-glyph btn-mini" href="table-boo.html"><i class="fontello-icon-link-4"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                    <td class="thumb-mini">
                                                        <div class="media-thumb"><a href="javascript:void(0);" class="img-shadow">
                                                            <img src="Content/img/demo/demo-avatar9601.jpg" class="thumb media-object"></a> </div>
                                                    </td>
                                                    <td><strong><a class="f16" href="table-boo.html">Isabella Johnson</a></strong> Curabitur vitae leo justo augue </td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td class="va-middle">
                                                        <div class="label-field text-right">Oportunity</div>
                                                        <div class="progress progress-info progress-mini filled2">
                                                            <div class="filler">
                                                                <div style="width: 65%" class="bar"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="table-boo.html">Edit user <i class="fontello-icon-edit"></i></a><a class="btn btn-green btn-glyph btn-mini" href="table-boo.html"><i class="fontello-icon-link-4"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                    <td class="thumb-mini">
                                                        <div class="media-thumb"><a href="javascript:void(0);" class="img-shadow">
                                                            <img src="Content/img/demo/demo-avatar9602.jpg" class="thumb media-object"></a> </div>
                                                    </td>
                                                    <td><strong><a class="_f16" href="table-boo.html">Ethan Williams</a></strong> Curabitur vitae leo justo augue </td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td class="va-middle">
                                                        <div class="label-field text-right">Prospect</div>
                                                        <div class="progress progress-info progress-mini filled2">
                                                            <div class="filler">
                                                                <div style="width: 50%" class="bar"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="table-boo.html">Edit user <i class="fontello-icon-edit"></i></a><a class="btn btn-glyph btn-mini" href="table-boo.html"><i class="fontello-icon-link-4"></i></a></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" class="checkbox check-row" value="0" name="checkRow"></td>
                                                    <td class="thumb-mini">
                                                        <div class="media-thumb"><a href="javascript:void(0);" class="img-shadow">
                                                            <img src="Content/img/demo/demo-avatar9605.jpg" class="thumb media-object"></a> </div>
                                                    </td>
                                                    <td><strong><a class="_f16" href="table-boo.html">Emma Jones</a></strong> Curabitur vitae leo justo augue </td>
                                                    <td>emma.jones@example.com</td>
                                                    <td class="va-middle">
                                                        <div class="label-field text-right">Not</div>
                                                        <div class="progress progress-danger progress-mini filled2">
                                                            <div class="filler">
                                                                <div style="width: 15%" class="bar"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="action"><a class="btn btn-yellow btn-mini no-wrap" href="table-boo.html">Edit user <i class="fontello-icon-edit"></i></a><a class="btn btn-glyph btn-mini" href="table-boo.html"><i class="fontello-icon-link-4"></i></a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div class="action-table">
                                            <div class="btn-toolbar pull-left">
                                                <div class="action-select-wraper">
                                                    <span class="arrow-table-action"></span>
                                                    <select class="selecttwo" id="actionTableDemo1" name="actionTableDemo1" data-placeholder="Action for selected...">
                                                        <option value=""></option>
                                                        <option value="check-all">Check all</option>
                                                        <option value="uncheck">Uncheck selected</option>
                                                        <option value="uncheck-all">Uncheck all</option>
                                                        <option value="validate">Validate</option>
                                                        <option value="delete">Delete</option>
                                                    </select>
                                                    <button class="btn btn-boo" type="submit">Perform the action</button>
                                                </div>
                                            </div>
                                            <!-- // btn-toolbar -->

                                            <div class="pagination pagination-boo">
                                                <ul>
                                                    <li class="disabled"><a href="table-boo.html#">Prev</a></li>
                                                    <li><a href="table-boo.html#">1</a></li>
                                                    <li class="active"><a href="table-boo.html#">2</a></li>
                                                    <li><a href="table-boo.html#">3</a></li>
                                                    <li><a href="table-boo.html#">4</a></li>
                                                    <li><a href="table-boo.html#">Next</a></li>
                                                </ul>
                                            </div>
                                            <!-- // pagination -->

                                        </div>
                                        <!-- // Action for table -->

                                    </div>
                                    <!-- // tab2 -->
                                </div>
                                <!-- // tabs -->
                            </div>
                            <!-- // Boo color table nav-pills -->
                            <div class="clearfix margin-xx">
                                <!-- // only demo separator -->
                            </div>
                        </div>
                        <!-- // Example row -->
                    </section>
                    <section>
                        <div class="page-header">
                            <h3><i class="opaci35 aweso-icon-table"></i>boo table <small>wraped in widget</small></h3>
                            <p>Widget is used for the DataTable. This is a demo application styles. Functional examples are <a href="table-datatable.html">DataTable page</a></p>
                        </div>
                        <div class="row-fluid">
                            <div class="span8 grider">
                                <div class="widget widget-simple widget-table">
                                    <div class="widget-header">
                                        <h4><i class="aweso-icon-table"></i>table in widget <small>.widget-simple</small></h4>
                                    </div>
                                    <!-- // widget-header -->
                                    <table class="table table-striped table-condensed table-content boo-table">
                                        <thead>
                                            <tr>
                                                <th scope="col" class="check-col">
                                                    <input type="checkbox" class="checkbox check-all" value="all" name="check-all"></th>
                                                <th scope="col" class="sorting_asc">ID <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting">Name <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting">City <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting hidden-phone hidden-tablet">Email <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting">Date of birth <span class="column-sorter"></span></th>
                                                <th scope="col" class="action">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checkbox"></td>
                                                <td>1</td>
                                                <td>Colin Nixon</td>
                                                <td>Long Beach</td>
                                                <td class="hidden-phone hidden-tablet"><a href="mailto:semper@diamSeddiam.edu">semper@diamSeddiam.edu</a></td>
                                                <td>02/10/1986</td>
                                                <td class="action"><a class="icon" href="table-boo.html"><i class="fugue-magnifier" title="detail"></i></a><a class="icon" href="table-boo.html"><i class="fugue-pencil" title="edit"></i></a><a class="icon" href="table-boo.html"><i class="fugue-cross-circle" title="delete"></i></a></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checkbox"></td>
                                                <td>2</td>
                                                <td>Naida Bennett</td>
                                                <td>Lockport</td>
                                                <td class="hidden-phone hidden-tablet"><a href="mailto:commodo@conseque.ca">commodo@conseque.ca</a></td>
                                                <td>04/21/1959</td>
                                                <td class="action"><a class="icon" href="table-boo.html"><i class="fugue-magnifier" title="detail"></i></a><a class="icon" href="table-boo.html"><i class="fugue-pencil" title="edit"></i></a><a class="icon" href="table-boo.html"><i class="fugue-cross-circle" title="delete"></i></a></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checkbox"></td>
                                                <td>3</td>
                                                <td>Danielle Myers</td>
                                                <td>Bentonville</td>
                                                <td class="hidden-phone hidden-tablet"><a href="mailto:nunc.sed@liberoInteger.ca">nunc.sed@liberoInteger.ca</a></td>
                                                <td>12/11/1971</td>
                                                <td class="action"><a class="icon" href="table-boo.html"><i class="fugue-magnifier" title="detail"></i></a><a class="icon" href="table-boo.html"><i class="fugue-pencil" title="edit"></i></a><a class="icon" href="table-boo.html"><i class="fugue-cross-circle" title="delete"></i></a></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checkbox"></td>
                                                <td>4</td>
                                                <td>Whitney Jones</td>
                                                <td>Troy</td>
                                                <td class="hidden-phone hidden-tablet"><a href="mailto:nunc@sedliberoproin.edu">nunc@sedliberoproin.edu</a></td>
                                                <td>08/09/1976</td>
                                                <td class="action"><a class="icon" href="table-boo.html"><i class="fugue-magnifier" title="detail"></i></a><a class="icon" href="table-boo.html"><i class="fugue-pencil" title="edit"></i></a><a class="icon" href="table-boo.html"><i class="fugue-cross-circle" title="delete"></i></a></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checkbox"></td>
                                                <td>5</td>
                                                <td>Marvin Bell</td>
                                                <td>Cody</td>
                                                <td class="hidden-phone hidden-tablet"><a href="mailto:aliquet@craspellentesque.com">aliquet@craspellentesque.com</a></td>
                                                <td>10/17/1979</td>
                                                <td class="action"><a class="icon" href="table-boo.html"><i class="fugue-magnifier" title="detail"></i></a><a class="icon" href="table-boo.html"><i class="fugue-pencil" title="edit"></i></a><a class="icon" href="table-boo.html"><i class="fugue-cross-circle" title="delete"></i></a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!-- // table -->
                                    <div class="widget-footer">
                                        <div class="btn-toolbar pull-left">
                                            <div class="action-select-wraper">
                                                <span class="arrow-table-action"></span>
                                                <select class="selecttwo" id="actionTableDemo2" name="actionTableDemo2" data-placeholder="Action for selected...">
                                                    <option value=""></option>
                                                    <option value="check-all">Check all</option>
                                                    <option value="uncheck">Uncheck selected</option>
                                                    <option value="uncheck-all">Uncheck all</option>
                                                    <option value="validate">Validate</option>
                                                    <option value="delete">Delete</option>
                                                </select>
                                                <button type="submit" class="btn">Perform the action</button>
                                            </div>
                                        </div>
                                        <div class="pagination pagination-btn pull-right">
                                            <ul>
                                                <li class="disabled"><a href="table-boo.html#">Prev</a></li>
                                                <li><a href="table-boo.html#">1</a></li>
                                                <li class="active"><a href="table-boo.html#">2</a></li>
                                                <li><a href="table-boo.html#">3</a></li>
                                                <li><a href="table-boo.html#">4</a></li>
                                                <li><a href="table-boo.html#">Next</a></li>
                                            </ul>
                                        </div>
                                        <!-- // pagination -->
                                    </div>
                                    <!-- // widget-footer -->
                                </div>
                                <!-- // Table in widge-box -->

                                <div class="widget widget-box widget-table">
                                    <div class="widget-header">
                                        <h4><i class="aweso-icon-table"></i>table in widget <small>.widget-box</small></h4>
                                    </div>
                                    <!-- // widget-header -->
                                    <table class="table table-striped table-condensed table-content boo-table">
                                        <thead>
                                            <tr>
                                                <th scope="col" class="check-col">
                                                    <input type="checkbox" class="checkbox check-all" value="all" name="check-all"></th>
                                                <th scope="col" class="sorting_desc">Name <span class="column-sorter"></span></th>
                                                <th scope="col" class="sorting">Adresse <span class="column-sorter"></span></th>
                                                <th scope="col" class="action">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checkbox" value="1" name="check1"></td>
                                                <td>Colin Nixon</td>
                                                <td>6890 East Spring Street, Unit 2L Long Beach, California 90815, USA</td>
                                                <td class="action"><a class="btn btn-yellow btn-mini" href="table-boo.html">detail</a></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checkbox" value="1" name="check1"></td>
                                                <td>Naida Bennett</td>
                                                <td>597 Washburn St, Lockport, NY 14094, USA</td>
                                                <td class="action"><a class="btn btn-yellow btn-mini" href="table-boo.html">detail</a></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checkbox" value="1" name="check1"></td>
                                                <td>Danielle Myers</td>
                                                <td>2679 Magellan Blvd 72712 Bentonville, USA</td>
                                                <td class="action"><a class="btn btn-yellow btn-mini" href="table-boo.html">detail</a></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checkbox" value="1" name="check1"></td>
                                                <td>Whitney Jones</td>
                                                <td>4058 Livernois Rd 48098 Troy United States</td>
                                                <td class="action"><a class="btn btn-yellow btn-mini" href="table-boo.html">detail</a></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="checkbox" class="checkbox" value="1" name="check1"></td>
                                                <td>Marvin Bell</td>
                                                <td>456 Yellowstone Avenue, Cody Wy Us 82414, Cody, WY, 82414 USA</td>
                                                <td class="action"><a class="btn btn-yellow btn-mini" href="table-boo.html">detail</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!-- // table -->
                                    <div class="widget-footer">
                                        <div class="btn-toolbar pull-left">
                                            <div class="action-select-wraper">
                                                <span class="arrow-table-action"></span>
                                                <select class="selecttwo" id="actionTableDemo3" name="actionTableDemo3" data-placeholder="Action for selected...">
                                                    <option value=""></option>
                                                    <option value="check-all">Check all</option>
                                                    <option value="uncheck">Uncheck selected</option>
                                                    <option value="uncheck-all">Uncheck all</option>
                                                    <option value="validate">Validate</option>
                                                    <option value="delete">Delete</option>
                                                </select>
                                                <button type="submit" class="btn btn-green">Perform the action</button>
                                            </div>
                                        </div>
                                        <div class="pagination pagination-boo pull-right">
                                            <ul>
                                                <li class="disabled"><a href="table-boo.html#">Prev</a></li>
                                                <li><a href="table-boo.html#">1</a></li>
                                                <li class="active"><a href="table-boo.html#">2</a></li>
                                                <li><a href="table-boo.html#">3</a></li>
                                                <li><a href="table-boo.html#">4</a></li>
                                                <li><a href="table-boo.html#">Next</a></li>
                                            </ul>
                                        </div>
                                        <!-- // pagination -->
                                    </div>
                                    <!-- // widget-footer -->
                                </div>
                                <!-- // Table in widge-box -->

                                <div class="widget widget-simple">
                                    <div class="widget-header header-small">
                                        <h4>widget-simple <small>no class widget-table</small></h4>
                                        <div class="table-tool-wrapper">
                                            <ul class="btn-toolbar pull-right">
                                                <li><a class="btn btn-small btn-glyph"><i class="fugue-table"></i></a></li>
                                                <li><a class="btn btn-small btn-glyph"><i class="fugue-table-pencil"></i>Table</a></li>
                                                <li><a class="btn btn-small btn-glyph"><i class="fugue-table-plus"></i></a></li>
                                                <li class="divider-vertical"></li>
                                                <li><a class="btn btn-small btn-glyph"><i class="fugue-table-export"></i></a></li>
                                                <li><a class="btn btn-small btn-glyph"><i class="fugue-table-excel"></i></a></li>
                                                <li class="divider-vertical"></li>
                                                <li><a class="btn btn-small btn-glyph" href="javascript:void(0)"><i class="fugue-arrow-circle"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <table class="table boo-table table-condensed table-striped table-content table-hover bg-green-light">
                                        <caption>
                                            For header use <span>.header-small</span>
                                        </caption>
                                        <thead>
                                            <tr id="HeadersRow0">
                                                <th scope="col">Order ID</th>
                                                <th scope="col">Customer ID</th>
                                                <th scope="col" class="hidden-phone">Employee ID</th>
                                                <th scope="col" class="hidden-phone">Order Date</th>
                                                <th scope="col" class="hidden-phone hidden-tablet">Required Date</th>
                                                <th scope="col">Shipped Date</th>
                                                <th scope="col">Costs</th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr id="HeadersRow0" class="total">
                                                <th>Total sum</th>
                                                <th></th>
                                                <th class="hidden-phone"></th>
                                                <th class="hidden-phone"></th>
                                                <th class="hidden-phone hidden-tablet"></th>
                                                <th></th>
                                                <th class="text-right">202.46</th>
                                            </tr>
                                        </tfoot>
                                        <tbody>
                                            <tr id="DataRow0">
                                                <td class="bold"><a href="table-boo.html#">10248</a></td>
                                                <td>VINET</td>
                                                <td class="hidden-phone">Buchanan</td>
                                                <td class="hidden-phone">8/4/2012</td>
                                                <td class="hidden-phone hidden-tablet">9/1/2012</td>
                                                <td>8/16/2012</td>
                                                <td class="text-right">32.38</td>
                                            </tr>
                                            <tr id="DataRow1">
                                                <td class="bold"><a href="table-boo.html#">10249</a></td>
                                                <td>TOMSP</td>
                                                <td class="hidden-phone">Suyama</td>
                                                <td class="hidden-phone">8/5/2012</td>
                                                <td class="hidden-phone hidden-tablet">9/16/2012</td>
                                                <td>8/10/2012</td>
                                                <td class="text-right">11.61</td>
                                            </tr>
                                            <tr id="DataRow2">
                                                <td class="bold"><a href="table-boo.html#">10250</a></td>
                                                <td>HANAR</td>
                                                <td class="hidden-phone">Peacock</td>
                                                <td class="hidden-phone">8/8/2012</td>
                                                <td class="hidden-phone hidden-tablet">9/5/2012</td>
                                                <td>8/12/2012</td>
                                                <td class="text-right">65.83</td>
                                            </tr>
                                            <tr id="DataRow3">
                                                <td class="bold"><a href="table-boo.html#">10251</a></td>
                                                <td>VICTE</td>
                                                <td class="hidden-phone">Leverling</td>
                                                <td class="hidden-phone">8/8/2012</td>
                                                <td class="hidden-phone hidden-tablet">9/5/2012</td>
                                                <td>8/15/2012</td>
                                                <td class="text-right">41.34</td>
                                            </tr>
                                            <tr id="DataRow4">
                                                <td class="bold"><a href="table-boo.html#">10252</a></td>
                                                <td>SUPRD</td>
                                                <td class="hidden-phone">Peacock</td>
                                                <td class="hidden-phone">8/9/2012</td>
                                                <td class="hidden-phone hidden-tablet">9/6/2012</td>
                                                <td>8/11/2012</td>
                                                <td class="text-right">51.3</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="widget-footer">
                                        <p>Footer for widget</p>
                                    </div>
                                    <!-- // widget-footer -->
                                </div>
                                <!-- // Table in widge-box -->
                            </div>
                            <!-- // Column -->

                            <div class="span4 grider">
                                <div class="well well-box well-nice">
                                    <div class="navbar">
                                        <div class="navbar-inner no-bg">
                                            <h4 class="title"><i class="fontello-icon-window"></i>Basic classes for widgets</h4>
                                        </div>
                                    </div>
                                    <!-- // navbar -->
                                    <div class="section-content-table">
                                        <table class="table table-striped table-content">
                                            <colgroup>
                                                <col class="col35">
                                                <col class="col65">
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th>class</th>
                                                    <th>description</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><code>.widget</code></td>
                                                    <td>boo element</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.widget-simple</code></td>
                                                    <td>style for widget</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.widget-box</code></td>
                                                    <td>style for widget</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.widget-table</code></td>
                                                    <td>style for table in widget</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.widget-header</code></td>
                                                    <td>heading for widget</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.widget-footer</code></td>
                                                    <td>footer for widget</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.table-tool-wrapper</code></td>
                                                    <td>wrap for tool in header (align left or right)</td>
                                                </tr>
                                                <tr>
                                                    <td><code>.btn-toolbar</code></td>
                                                    <td>bootstrap element - use for bar to <code>ul</code> or <code>div</code></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- // table-content -->
                                </div>
                                <pre class="prettyprint linenums">
&lt;!-- widget-simple --&gt;
&lt;div class="widget widget-simple widget-table"&gt;
    &lt;div class="widget-header"&gt;
        &lt;h4&gt; ... &lt;/h4&gt;
        &lt;div class="table-tool-wrapper"&gt;
            &lt;ul class="btn-toolbar pull-right"&gt;
                ...
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;table class="table boo-table table-striped ..."&gt;
        ...
    &lt;/table&gt;
    &lt;div class="widget-footer"&gt;
        &lt;div class="btn-toolbar"&gt;
            ...
        &lt;/div&gt;
        &lt;div class="pagination pagination-btn pull-right"&gt;
            ...
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- widget-box --&gt;
&lt;div class="widget widget-box widget-table"&gt;
</pre>

                            </div>
                            <!-- // Column -->

                        </div>
                        <!-- // Example row -->

                    </section>
                    <!-- // section table -->

                    <section>
                        <div class="page-header">
                            <h3 class="heading-icon" data-icon="&#xe397;" aria-hidden="true">Table wraped in widget <small>add color background</small></h3>
                        </div>
                        <p>Table in widget-box <code>.bg-blue-medium </code></p>
                        <div class="row-fluid">
                            <div class="span4">
                                <div class="widget widget-box widget-table">
                                    <div class="widget-header">
                                        <h4>widget box </h4>
                                    </div>
                                    <div class="widget-content">
                                        <!-- TABLE - background color - blue-light -->
                                        <table class="table boo-table table-condensed table-content bg-blue-light">
                                            <caption>
                                                Caption - Table Title
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th>Full Name</th>
                                                    <th>Phone</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jacob Smith</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Isabella Johnson</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Ethan Williams</td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Emma Jones</td>
                                                    <td>emma.jones@example.com</td>
                                                    <td><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="widget-footer"></div>
                                </div>
                                <!-- // Table in widget-box -->

                            </div>
                            <!-- // Column -->

                            <div class="span4">
                                <div class="widget widget-box widget-table">
                                    <div class="widget-header">
                                        <h4>widget box </h4>
                                    </div>
                                    <div class="widget-content">
                                        <!-- TABLE - background color - green-light -->
                                        <table class="table boo-table table-condensed table-content bg-green-light">
                                            <caption>
                                                Caption - Table Title
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th>Full Name</th>
                                                    <th>Phone</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jacob Smith</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Isabella Johnson</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Ethan Williams</td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Emma Jones</td>
                                                    <td>emma.jones@example.com</td>
                                                    <td><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="widget-footer"></div>
                                </div>
                                <!-- // Table in widget-box -->

                            </div>
                            <!-- // Column -->

                            <div class="span4">
                                <div class="widget widget-box widget-table">
                                    <div class="widget-header">
                                        <h4>widget box </h4>
                                    </div>
                                    <div class="widget-content">
                                        <!-- TABLE - background color - yellow-light -->
                                        <table class="table boo-table table-condensed table-content bg-yellow-light">
                                            <caption>
                                                Caption - Table Title
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th>Full Name</th>
                                                    <th>Phone</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jacob Smith</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Isabella Johnson</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Ethan Williams</td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Emma Jones</td>
                                                    <td>emma.jones@example.com</td>
                                                    <td><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="widget-footer"></div>
                                </div>
                                <!-- // Table in widget-box -->

                            </div>
                            <!-- // Column -->

                        </div>
                        <!-- // Example row -->

                        <p>Table in widget-simple <code>.table-striped .bg-blue-medium </code></p>
                        <div class="row-fluid">
                            <div class="span4">
                                <div class="widget widget-simple widget-table">
                                    <div class="widget-header no-border">
                                        <h4>widget simple </h4>
                                    </div>
                                    <div class="widget-content">
                                        <!-- TABLE - background color - blue-medium -->
                                        <table class="table boo-table table-condensed table-content table-striped bg-blue-medium">
                                            <caption>
                                                Caption - Table Title
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th>Full Name</th>
                                                    <th>Phone</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jacob Smith</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Isabella Johnson</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Ethan Williams</td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Emma Jones</td>
                                                    <td>emma.jones@example.com</td>
                                                    <td><a class="btn btn-yellow btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="widget-footer"></div>
                                </div>
                                <!-- // Table in widget-box -->
                            </div>
                            <!-- // Column -->

                            <div class="span4">
                                <div class="widget widget-simple widget-table">
                                    <div class="widget-header no-border">
                                        <h4>widget simple </h4>
                                    </div>
                                    <div class="widget-content">
                                        <!-- TABLE - background color - green-medium -->
                                        <table class="table boo-table table-condensed table-content table-striped bg-green-medium">
                                            <caption>
                                                Caption - Table Title
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th>Full Name</th>
                                                    <th>Phone</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jacob Smith</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Isabella Johnson</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Ethan Williams</td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Emma Jones</td>
                                                    <td>emma.jones@example.com</td>
                                                    <td><a class="btn btn-green btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="widget-footer"></div>
                                </div>
                                <!-- // Table in widget-box -->
                            </div>
                            <!-- // Column -->

                            <div class="span4">
                                <div class="widget widget-simple widget-table">
                                    <div class="widget-header no-border">
                                        <h4>widget simple </h4>
                                    </div>
                                    <div class="widget-content">
                                        <!-- TABLE - background color - yellow-medium -->
                                        <table class="table boo-table table-condensed table-content table-striped bg-yellow-medium">
                                            <caption>
                                                Caption - Table Title
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th>Full Name</th>
                                                    <th>Phone</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Jacob Smith</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Isabella Johnson</td>
                                                    <td>jacob.smith@example.com</td>
                                                    <td><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Ethan Williams</td>
                                                    <td>ethan.williams@example.com</td>
                                                    <td><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                                <tr>
                                                    <td>Emma Jones</td>
                                                    <td>emma.jones@example.com</td>
                                                    <td><a class="btn btn-blue btn-mini" href="table-boo.html">Edit</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="widget-footer"></div>
                                </div>
                                <!-- // Table in widget-box -->
                            </div>
                            <!-- // Column -->

                        </div>
                        <!-- // Example row -->

                    </section>
                    <!-- // section table -->

                    <section>
                        <div class="page-header">
                            <h3 class="heading-icon" data-icon="&#xe397;" aria-hidden="true">Other variants for <small>well-nice</small></h3>
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <div class="well well-nice">
                                    <table class="table table-condensed table-hover margin-00">
                                        <caption>
                                            Default Table Caption - Title for table <span>Here text in span</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">ID</th>
                                                <th scope="col">Name</th>
                                                <th scope="col" class="hidden-phone">City</th>
                                                <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                                <th scope="col">Date of birth</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Colin Nixon</td>
                                                <td class="hidden-phone">Long Beach</td>
                                                <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                                <td>02/10/1986</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Naida Bennett</td>
                                                <td class="hidden-phone">Lockport</td>
                                                <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                                <td>04/21/1959</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Danielle Myers</td>
                                                <td class="hidden-phone">Bentonville</td>
                                                <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                                <td>12/11/1971</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // Table in well-nice -->

                            </div>
                            <!-- // Column -->

                            <div class="span6">
                                <div class="well well-nice well-impressed">
                                    <table class="table table-condensed table-content table-hover">
                                        <caption>
                                            Default Table Caption - Title for table <span>Here text in span</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">ID</th>
                                                <th scope="col">Name</th>
                                                <th scope="col" class="hidden-phone">City</th>
                                                <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                                <th scope="col">Date of birth</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Colin Nixon</td>
                                                <td class="hidden-phone">Long Beach</td>
                                                <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                                <td>02/10/1986</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Naida Bennett</td>
                                                <td class="hidden-phone">Lockport</td>
                                                <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                                <td>04/21/1959</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Danielle Myers</td>
                                                <td class="hidden-phone">Bentonville</td>
                                                <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                                <td>12/11/1971</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // Table in well-nice -->

                            </div>
                            <!-- // Column -->

                        </div>
                        <!-- // Example row -->

                        <div class="row-fluid">
                            <div class="span6">
                                <div class="well well-nice well-impressed">
                                    <table class="table table-condensed table-bordered table-hover margin-00">
                                        <caption>
                                            Default Table Caption - Title for table <span>Here text in span</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">ID</th>
                                                <th scope="col">Name</th>
                                                <th scope="col" class="hidden-phone">City</th>
                                                <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                                <th scope="col">Date of birth</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Colin Nixon</td>
                                                <td class="hidden-phone">Long Beach</td>
                                                <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                                <td>02/10/1986</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Naida Bennett</td>
                                                <td class="hidden-phone">Lockport</td>
                                                <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                                <td>04/21/1959</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Danielle Myers</td>
                                                <td class="hidden-phone">Bentonville</td>
                                                <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                                <td>12/11/1971</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // Table in well-nice -->

                            </div>
                            <!-- // Column -->

                            <div class="span6">
                                <div class="well well-nice bg-wite">
                                    <table class="table table-condensed table-content table-light table-hover">
                                        <caption>
                                            Default Table Caption - Title for table <span>Here text in span</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">ID</th>
                                                <th scope="col">Name</th>
                                                <th scope="col" class="hidden-phone">City</th>
                                                <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                                <th scope="col">Date of birth</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Colin Nixon</td>
                                                <td class="hidden-phone">Long Beach</td>
                                                <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                                <td>02/10/1986</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Naida Bennett</td>
                                                <td class="hidden-phone">Lockport</td>
                                                <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                                <td>04/21/1959</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Danielle Myers</td>
                                                <td class="hidden-phone">Bentonville</td>
                                                <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                                <td>12/11/1971</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // Table in well-nice -->

                            </div>
                            <!-- // Column -->

                        </div>
                        <!-- // Example row -->

                    </section>
                    <!-- // section table -->

                    <section id="tableStriped">
                        <div class="page-header">
                            <h3 class="heading-icon" data-icon="&#xe397;" aria-hidden="true">Other variants for <small>well-black </small></h3>
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <div class="well well-black">
                                    <table class="table boo-table table-condensed table-hover margin-00">
                                        <caption>
                                            Default Table Caption - Title for table <span>Here text in span</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">ID</th>
                                                <th scope="col">Name</th>
                                                <th scope="col" class="hidden-phone">City</th>
                                                <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                                <th scope="col">Date of birth</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Colin Nixon</td>
                                                <td class="hidden-phone">Long Beach</td>
                                                <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                                <td>02/10/1986</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Naida Bennett</td>
                                                <td class="hidden-phone">Lockport</td>
                                                <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                                <td>04/21/1959</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Danielle Myers</td>
                                                <td class="hidden-phone">Bentonville</td>
                                                <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                                <td>12/11/1971</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // Table in well-black -->

                            </div>
                            <!-- // Column -->

                            <div class="span6">
                                <div class="well well-black well-impressed">
                                    <table class="table boo-table table-condensed table-content table-hover">
                                        <caption>
                                            Default Table Caption - Title for table <span>Here text in span</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">ID</th>
                                                <th scope="col">Name</th>
                                                <th scope="col" class="hidden-phone">City</th>
                                                <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                                <th scope="col">Date of birth</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Colin Nixon</td>
                                                <td class="hidden-phone">Long Beach</td>
                                                <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                                <td>02/10/1986</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Naida Bennett</td>
                                                <td class="hidden-phone">Lockport</td>
                                                <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                                <td>04/21/1959</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Danielle Myers</td>
                                                <td class="hidden-phone">Bentonville</td>
                                                <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                                <td>12/11/1971</td>
                                            </tr>
                                            <tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // Table in well-black -->

                            </div>
                            <!-- // Column -->

                        </div>
                        <!-- // Example row -->

                        <div class="row-fluid">
                            <div class="span6">
                                <div class="well well-black well-impressed">
                                    <table class="table boo-table table-condensed table-bordered table-hover margin-00">
                                        <caption>
                                            Default Table Caption - Title for table <span>Here text in span</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">ID</th>
                                                <th scope="col">Name</th>
                                                <th scope="col" class="hidden-phone">City</th>
                                                <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                                <th scope="col">Date of birth</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Colin Nixon</td>
                                                <td class="hidden-phone">Long Beach</td>
                                                <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                                <td>02/10/1986</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Naida Bennett</td>
                                                <td class="hidden-phone">Lockport</td>
                                                <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                                <td>04/21/1959</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Danielle Myers</td>
                                                <td class="hidden-phone">Bentonville</td>
                                                <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                                <td>12/11/1971</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // Table in well-black -->

                            </div>
                            <!-- // Column -->

                            <div class="span6">
                                <div class="well well-black">
                                    <table class="table table-condensed table-content table-light table-hover">
                                        <caption>
                                            Default Table Caption - Title for table <span>Here text in span</span>
                                        </caption>
                                        <thead>
                                            <tr>
                                                <th scope="col">ID</th>
                                                <th scope="col">Name</th>
                                                <th scope="col" class="hidden-phone">City</th>
                                                <th scope="col" class="hidden-tablet hidden-phone">Email</th>
                                                <th scope="col">Date of birth</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>Colin Nixon</td>
                                                <td class="hidden-phone">Long Beach</td>
                                                <td class="hidden-tablet hidden-phone">semper@diamSeddiam.edu</td>
                                                <td>02/10/1986</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Naida Bennett</td>
                                                <td class="hidden-phone">Lockport</td>
                                                <td class="hidden-tablet hidden-phone">commodo@conseque.ca</td>
                                                <td>04/21/1959</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Danielle Myers</td>
                                                <td class="hidden-phone">Bentonville</td>
                                                <td class="hidden-tablet hidden-phone">nunc.sed@liberoInteger.ca</td>
                                                <td>12/11/1971</td>
                                            </tr>
                                            <tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // Table in well-black -->

                            </div>
                            <!-- // Column -->

                        </div>
                        <!-- // Example row -->

                    </section>
                    <!-- // section table -->

                </div>
                <!-- // page content -->

            </div>
            <!-- // main-content  -->

        </div>
        <!-- // main-container  -->

        <footer id="footer-fix">
            <div id="footer-sidebar" class="footer-sidebar">
                <div class="navbar">
                    <div class="btn-toolbar"><a class="btn btn-glyph btn-link" href="javascript:void(0);"><i class="fontello-icon-up-open-1"></i></a></div>
                </div>
            </div>
            <!-- // footer sidebar -->

            <div id="footer-content" class="footer-content">
                <div class="navbar navbar-inverse">
                    <div class="navbar-inner">
                        <ul class="nav pull-left">
                            <li class="divider-vertical hidden-phone"></li>
                            <li><a id="btnToggleSidebar" class="btn-glyph fontello-icon-resize-full-2 tip hidden-phone" href="javascript:void(0);" title="show hide sidebar"></a></li>
                            <li class="divider-vertical hidden-phone"></li>
                            <li><a id="btnChangeSidebar" class="btn-glyph fontello-icon-login tip hidden-phone" href="javascript:void(0);" title="change sidebar position"></a></li>
                            <li class="divider-vertical"></li>
                            <li><a id="btnChangeSidebarColor" class="btn-glyph fontello-icon-palette tip" href="javascript:void(0);" title="change sidebar color"></a></li>
                            <li class="divider-vertical"></li>
                            <li><a class="btn-glyph fontello-icon-cw" href="javascript:void(0);"></a></li>
                            <li class="divider-vertical"></li>
                            <li><a class="fontello-icon-home-3" href="dashboard-one.html"></a></li>
                            <li class="divider-vertical"></li>
                        </ul>
                        <ul class="nav pull-right">
                            <li class="divider-vertical"></li>
                            <li><a class="btn-glyph fontello-icon-help-2 tip" href="javascript:void(0);" title="help to page"></a></li>
                            <li class="divider-vertical"></li>
                            <li><a class="btn-glyph fontello-icon-cog-4 tip" href="javascript:void(0);" title="settings app"></a></li>
                            <li class="divider-vertical"></li>
                            <li><a id="btnLogout" class="btn-glyph fontello-icon-logout-1 tip" href="javascript:void(0);" title="logout"></a></li>
                            <li class="divider-vertical"></li>
                            <li><a id="btnScrollup" class="scrollup btn-glyph fontello-icon-up-open-1" href="javascript:void(0);"><span class="hidden-phone">Scroll</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- // footer content -->

        </footer>
        <!-- // footer-fix  -->

    </div>
    <!-- // page-container  -->

    <!-- Le javascript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- Libraries -->
    <script src="Content/libs/jquery/jquery-1.9.1/jquery.min.js"></script>
    <script src="Content/libs/jquery/jquery.migrate-1.1.1/jquery-migrate.min.js"></script>
    <script src="Content/libs/jquery/jquery.ui.combined-1.10.2/jquery-ui.min.js"></script>
    <script src="Content/libs/bootstrap/js/bootstrap.min.js"></script>
    <!-- System -->
    <script src="Content/libs/pl-system/jquery.nicescroll/js/jquery.nicescroll.min.js"></script>
    <script src="Content/libs/pl-system/jquery-cookie/js/jquery.cookie.js"></script>
    <script src="Content/libs/pl-system/jquery-mousewheel/js/jquery.mousewheel.js"></script>
    <script src="Content/libs/pl-system/xbreadcrumbs/js/xbreadcrumbs.js"></script>
    <!-- System info -->
    <script src="Content/libs/pl-system-info/bootstrapx-clickover/js/bootstrapx-clickover.js"></script>
    <script src="Content/libs/pl-system-info/gritter/js/jquery.gritter.min.js"></script>
    <script src="Content/libs/pl-system-info/jquery.notyfy/js/jquery.notyfy.js"></script>
    <script src="Content/libs/pl-system-info/qtip2/js/jquery.qtip.min.js"></script>
    <!-- Form -->
    <script src="Content/libs/pl-form/bootstrap-select/js/bootstrap-select.js"></script>
    <script src="Content/libs/pl-form/select2/js/select2.js"></script>
    <script src="Content/libs/pl-form/uniform/js/jquery.uniform.min.js"></script>
    <script src="Content/libs/pl-form/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <!-- Content -->
    <script src="Content/libs/pl-content/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
    <script src="Content/libs/pl-content/bootstrap-modal/js/bootstrap-modal.js"></script>
    <script src="Content/libs/pl-content/bootbox/js/bootbox.min.js"></script>
    <!-- Component -->
    <!-- Gallery -->
    <!-- Tables -->
    <script src="Content/libs/bootstrap-jasny/js/bootstrap-rowlink.js"></script>
    <script src="Content/libs/pl-table/datatables/js/jquery.dataTables.js"></script>
    <script src="Content/libs/pl-table/datatables/js/jquery.dataTables.plugins.js"></script>
    <script src="Content/libs/pl-table/datatables/js/jquery.dataTables.columnFilter.js"></script>
    <script src="Content/libs/pl-table/datatables/js/jquery.FixedColumns.plugins.js"></script>
    <!-- Data Visualization -->
    <!-- Only example -->
    <script src="Content/libs/google-code-prettify/js/prettify.js"></script>
    <!-- Main js -->
    <script src="Content/js/app/core.js"></script>
    <script src="Content/js/app/demo-common.js"></script>

    <!-- Only This Demo Page -->
    <script>

        // FORM - BOOTSTRAP SELECTPICKER
        // ------------------------------------------------------------------------------------------------ * -->
        // plugins/pl-form/bootstrap-select/boo/js/bootstrap-select.js
        $('select.selectpicker').selectpicker();

        // FORM - SELECT 2
        // ------------------------------------------------------------------------------------------------ * -->
        // plugins/pl-form/select2/boo/js/select2.min.js
        $(".selecttwo").select2({
            minimumResultsForSearch: 6,
            width: "off"
        });

        // FORM - UNIFORM PLUGIN 
        // ------------------------------------------------------------------------------------------------ * -->
        // Content/plugins/pl-form/uniform/boo/js/jquery.uniform.min.js
        $("input.checkbox, input.radio, input:file.input-file").uniform({
            radioClass: 'radios' // edited class - the original radio
        });

    </script>

</body>
</html>
